<template>
    <div>
        <h3 class="title">{{goods.title}}</h3>
        <div class="price">
            <span class="new">{{goods.newPrice}}</span>
            <del class="old">{{goods.oldPrice}}</del>
            <sup class="dis" v-if="goods.discount">{{goods.discount}}</sup>
        </div>
        <div class="columns">
            <span v-for="(item,index) in goods.columns" :key="index">
                {{item}}
            </span>
            
        </div>
        <div class="services">
            <div v-for="(item,index) in goods.services" :key="index" v-show="index!=0">
                <img :src="item.icon" alt="">
                {{item.name}}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"DetailInfo",
    data(){
        return {

        }
    },
    props:{
        goods:{
            type:Object,
            default(){
                return {}
            }
        }
    }
}
</script>
<style lang="css" scoped>
    .title{
        font-size:15px;
        margin: 10px 5px;
        font-weight: 600;
    }
    .price{
        margin: 15px 0px 10px 10px;
    }
    .new{
        font-size: 15px;
        color: #ff5777;
    }
    .old{
        margin-left: 5px;
        font-size: 13px;
    }
    .dis{
        background:#ff5777;
        color:white;
        padding: 3px; 
        border-radius: 5px;
        margin-left: 5px;
    }
    .columns{
        display: flex;
        margin: 0px 10px;
        padding: 10px 0px;
        border-bottom: 1px solid rgb(221, 217, 217);
    }
    .columns span{
        flex:1;
        font-size: 13px;
        color:rgb(221, 217, 217);
    }
    .columns span:nth-child(1){
        text-align: left
    }
    .columns span:nth-child(2){
        text-align: center
    }
    .columns span:nth-child(3){
        text-align: right;
    }
    .services{
       border-bottom: 3px solid rgb(221, 217, 217);
       padding:10px 0px;
    }
    .services div{
        width: 30%;
        display: inline-block;
        margin:0px 5px;
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        text-align: center;
    }
    .services div img{
        width:15px;
        vertical-align:middle
    }
</style>